<template>
  <div class="md-user-base-info">
    <div class="r-title">
      <span>Base Information</span>
    </div>
    <div class="user-info-main">
      <div>
        <el-form :rules="rules" :model="form" ref="formRef" label-width="120px">
          <el-form-item prop="avatar" label="avatar">
            <md-upload-card v-model="form.avatar" label="upload avatar" width="120px" height="120px" action="/api/util/upload/localSingle"></md-upload-card>
          </el-form-item>
          <el-form-item prop="user name" label="userName">
            <el-input v-model="form.userName" class="w-300" placeholder="please input" />
          </el-form-item>
          <el-form-item prop="sex" label="sex">
            <el-radio-group v-model="form.sex">
              <el-radio label="0">male</el-radio>
              <el-radio label="1">female</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="phone" label="contact number">
            <el-input v-model="form.phone" class="w-300" placeholder="please input" />
          </el-form-item>
          <el-form-item prop="email" label="email">
            <el-input v-model="form.email" class="w-300" placeholder="please input" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('formRef')">Submit</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'MDUserBaseInfo',
  layout: 'dynamic',
  data () {
    const validateEMail = (rule, value, callback) => {
      const reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
      if (value === '') {
        callback(new Error('This field is required!'))
      } else if (!reg.test(value)) {
        callback(new Error('Email invalid'))
      } else {
        callback()
      }
    }
    return {
      form: {
        avatar: null,
        userName: '',
        sex: '',
        phone: '',
        email: ''
      },
      rules: {
        avatar: [{ required: true, message: 'This field is required!', trigger: 'change' }],
        userName: [{ required: true, message: 'This field is required!', trigger: 'blur' }],
        phone: [{ required: true, message: 'This field is required!', trigger: 'blur' }],
        email: [{ required: true, validator: validateEMail, trigger: 'blur' }],
        sex: [{ required: true, message: 'This field is required!', trigger: 'change' }],
      }
    }
  },
  mounted () {
    this.getUserInfoById()
  },
  methods: {
    async getUserInfoById () {
      const res = await this.$axios.get(`web/user/${this.$local.getItem('user').userId}`)
      if (res.code == 200) {
        this.form = res.data
        this.$nextTick(() => {
          this.$refs.formRef.clearValidate()
        })
      }
    },
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const options = {
            userId: this.form.userId,
            avatar: this.form.avatar,
            userName: this.form.userName,
            sex: this.form.sex,
            phone: this.form.phone,
            email: this.form.email
          }
          const res = await this.$axios.put('web/user', options)
          if (res.code == 200) {
            this.$message.success('submit success!')
            this.$local.setItem('user', res.data)
            window.location.reload()
          }
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.md-user-base-info {
  width: 100%;
  .r-title {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ededed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #414141;
    padding-right: 20px;
    box-sizing: border-box;
    span {
      font-weight: 100;
      font-size: 24px;
      line-height: 40px;
      border-bottom: 1px solid $md-primary-color;
    }
    a {
      color: $md-primary-color;
    }
  }
  .user-info-main {
    margin-top: 20px;
  }
}
.w-300 {
  width: 300px;
}
</style>